<template>
	<div class="song-sheet-header clearfix">
		<div class="left">
			<img v-lazy="data.coverImgUrl + '?param=400y400'">
		</div>
		<div class="right">
			<div class="title">
				<p>{{ data.name }}</p>
			</div>
			<div class="creator">
				<img :src="data.name && data.creator.avatarUrl + '?param=50y50'">
				<p> {{ data.name && data.creator.nickname }} </p>
				<p> {{ data.createTime | formatDate }} 创建 </p>
			</div>
			<div class="action">
				<div class="button">
					<i class="el-icon-video-play"></i>
					<span @click="playAll">播放全部</span>
				</div>
			</div>
			<div class="desc">
				<p>标签：{{ data.tags }}</p>
				<p>简介：{{ data.description }}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import { formatDate } from "@/assets/tool.js"
	export default {
		name: 'songSheetHeader',
		props: ["data"],
		filters: {
			formatDate(time) {
				return formatDate(time);
			}
		},
		methods: {
			// 发出播放全部事件
			playAll() {
				this.$emit('playAll');
			}
		}
		
	}
</script>

<style lang="less" scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.song-sheet-header {
		padding: 40px;
		display: flex;
		height: 213px;
		overflow: hidden;
	}
	.song-sheet-header .left {
		margin-right: 25px;
	}
	.song-sheet-header .left > img{
		width: 213px;
	}
	.song-sheet-header .right {
		// background-color: red;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}
	.right .title {
		font-size: var(--second-font-size);
		color: var(--main-font-color);
	}
	.right .creator {
		display: flex;
		align-items: center;
	}
	.right .creator img {
		width: 35px;
		border-radius: 50%;
		margin-right: 10px;
	}
	.right .creator p {
		margin: 0 5px;
		font-size: var(--font-size);
		color: var(--routine-font-color);
	}
	.right .action .button {
		width: 116px;
		height: 30px;
		border-radius: 3px;
		background-color: #f95043;
		background: linear-gradient(to right, #fa5143, #f44d41, #d53b32);
		color: #fbdfdd;
		line-height: 30px;
		text-align: center;
		cursor: pointer;
	}
	.right .action .button > i {
		margin-right: 3px;
		color: #ffffff;
	}
	.right .desc p:first-child {
		margin-bottom: 10px;
	}
	.right .desc p{
		color: var(--routine-font-color);
		font-size: var(--font-size);
		line-height: 18px;
	}
</style>
